<template>
	<view class="body margin-xl">
		<view class="padding-sm bg-white text-centerss device-list" :class="item.status == 1? 'ischeck': ''"
			@touchend.prevent="goTouchend(item.deviceId,item.buttonId,1)">
			<image class="margin-top-sm" :src="imgUrl + item.image" style="width: 9vh;height: 10vh;"></image><text
				class="margin-top-sm"> {{item.buttonName}}

			</text>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	export default {

		// "item： 按钮信息", "foot：是否处于编辑","status：设备状态"
		props: ["item",
			"foot",
			"status"
		],
		data() {
			return {
				imgUrl: this.imgUrl,
				isCheck: false,
			}
		},
		methods: {

			// 按钮单击
			goTouchend(deviceId, buttonId, type) {
				let _this = this;
				clearTimeout(_this.timeOutEvent);

				if (_this.timeOutEvent !== 0) {
					if (!this.foot && this.status == 0) {
						uni.showToast({
							title: '设备离线',
							icon: 'none'
						})
						return;
					}
					if (_this.isCheck) {
						return
					}

					if (!this.foot && this.status == 1) {
						clearTimeout(_this.timeOutEvent);

						if (_this.timeOutEvent !== 0) {
							_this.showToast("执行操作中")
							_this.$http.request({
									url: 'app/button/send',
									method: 'POST',
									data: {
										'deviceId': deviceId,
										'buttonId': buttonId
									},
									success: (data) => {
										_this.showToast("执行成功！")
										_this.$emit('refresh')
									}
								}

							)
						}
					}

					if (this.foot) {
						uni.navigateTo({
							url: '../components/infi-comp?type=' + type + "&id=" + buttonId
						})
					}
				}
			},

			
			showToast(params) {
				this.$refs.uToast.show({
					loading: true,
					type: 'loading',
					message: params,
					duration: 200
				})
			}
		}
	}
</script>
<style>
	.body {
		width: 100%;
		height: 8rem;
		border-radius: 50%;
	}

	.ischeck {
		background-color: #9debeb;
	}

	.device-list {
		width: 8rem;
		height: 8rem;
		border-radius: 50%;
		display: flex;
		border: 5rpx solid #c6c6c6;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>
